<template>
	<el-dialog v-model="visible" :destroy-on-close="true" :width="800" top="5" :title="`${dialogData.title}用户`">
		<el-form ref="formRef" :rules="rules" :disabled="dialogData.isView" :model="formData" label-width="100px">
			<el-row>
				<el-col :span="12">
					<el-form-item label="姓名" prop="name" clearable>
						<el-input v-model="formData!.name" placeholder="姓名"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="用户帐号" prop="username" clearable>
						<el-input v-model="formData!.username" placeholder="登录帐号"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="身份证号" prop="idcard" clearable>
						<el-input v-model="formData!.idcard" placeholder="请填写身份证号"></el-input>
					</el-form-item>
				</el-col>
                <el-col :span="12">
					<el-form-item label="联系电话" prop="contact" clearable>
						<el-input v-model="formData!.contact" placeholder="请输入联系电话"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="部门信息" prop="organId" clearable>
						<el-tree-select
							:props="{label:'name'}"
							v-model="formData!.organId"
							:data="treeData"
							check-strictly
							highlight-current
							show-checkbox
							node-key="id"
							:filter-node-method="filterNodeMethod"
							filterable
							style="width: 240px"
						/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="用户头像" prop="avatar" clearable>
						<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false">
							<img v-if="imageUrl" :src="imageUrl" class="avatar" />
							<el-button else type="primary" :icon="Upload">上传图片</el-button>
						</el-upload>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" v-show="!dialogData.isView" @click="handleSubmit(formRef)">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="UserDialog">
import { ref, reactive } from 'vue';
import { FormInstance, FormRules } from 'element-plus';
import { Plus, Upload } from '@element-plus/icons-vue';
import { useModal } from '/@/hooks/useModal';
import rulesObj from './rules';
import { getList } from "/@/api/auth/organ";
const formData = reactive<any>({
    name: '',
    username: '',
    idcard: '',
    contact: '',
	organId: ''
});

const keyword = ref(''), treeData = ref([])

const imageUrl = ref('');
//验证规则
const rules = reactive<FormRules>(rulesObj);

const formRef = ref<FormInstance>();

const filterNodeMethod = (value, data) => data.label.includes(value)

const initialized = async () => {
	const res = await getList({keyword});
	treeData.value = res.data
}

const { visible, acceptParams, handleSubmit, dialogData } = useModal(formData, formRef, initialized)

defineExpose({
	acceptParams,
});
</script>
